<template>
<div>
	<!-- {{componentObj}} -->
	<div class="editPage previewPage">
		<div class="edit-main">
			<div class="design-box">
				<div class="design-main">
					<ul>
						<li class="list-group-item undraggable" :class="['is'+selItem.designtype, {draggableItem : selItem.designtype != 'DesignConfig'}]" :style="(selItem.designtype == 'DesignBackground' ? {position: 'absolute', zIndex: 0, top: '64px'}: '')" v-for="(selItem, selIdx) in selComponents" :key="'my-name'+selIdx" >
							<div class="design-item">
								<div>
									<!-- 头部 -->
									<form-config  v-if="selItem.designtype == 'DesignConfig'" :header-form="selItem"></form-config>
									<!-- 富文本 -->
									<form-design-richeditor v-if="selItem.designtype == 'FormDesignRicheditor'" :richeditor-form="selItem"></form-design-richeditor>
									<!-- 标题 -->
									<form-title v-if="selItem.designtype == 'DesignTitle'" :title-form="selItem"></form-title>
									<!-- 图片 -->
									<form-image v-if="selItem.designtype == 'DesignImage'" :image-form="selItem"></form-image>
									<!-- 辅助空白 -->
									<form-white-space v-if="selItem.designtype == 'DesignWhitespace'" :space-form="selItem"></form-white-space>
									<!-- 背景 -->
									<form-background v-if="selItem.designtype == 'DesignBackground'" :background-form="selItem"></form-background>
									<!-- 商品 -->
									<form-good-list v-if="selItem.designtype == 'DesignGoodList'" :goodlist-form="selItem"></form-good-list>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="previewInfo">
				<h3>预览</h3>
				<p class="tip">页面可在手机端预览，请扫码或者复制链接直接查看</p>
				<div class="qrcode-box">
					<div class="qrcode-box-img"><div id="qrcode"></div><p class="scan">扫描二维码查看</p></div>
					<div class="qrcode-box-link">
						<div class="qrcode-link">{{qrcodeLink}}</div>
						<div class="qrcode-copy">
							<el-button type="primary" @click="copyUrl">复制链接</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
import QRCode from 'qrcodejs2' 
import FormConfig from './FormConfig/FormConfig';
import FormDesignRicheditor from './FormDesignRicheditor/FormDesignRicheditor';
import FormTitle from './FormTitle/FormTitle';
import FormGoodList from './FormGoodList/FormGoodList';
import FormWhiteSpace from './FormWhiteSpace/FormWhiteSpace';
import FormBackground from './FormBackground/FormBackground';
import FormImage from './FormImage/FormImage';
export default {
	components: {FormConfig,FormDesignRicheditor,FormTitle,FormGoodList,FormWhiteSpace,FormBackground,FormImage},
	name: 'FormPreview',
	data () {
		return {
			selComponents: [],
			qrcodeLink: "",
    	}
  	},
  	async created(){},
	async activated(){
		this.selComponents = await this.getData();
	},
	methods:{
		qrcode(){
			let qrcode = new QRCode('qrcode', {
				width: 250,
				height: 250, // 高度
				text: this.qrcodeLink, // 二维码内容
				render: 'canvas',   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
				background: '#fff',
				// foreground: '#ff0'
			});
		},
		copyUrl(e) {
			let that = this;
			this.$copyText(this.qrcodeLink).then(function (e) {
				that.$message({
					message: '复制成功！',
					duration: 1000,
					type: 'success'
				});
			}, function (e) {
				that.$message({
					message: '复制失败！请重试！',
					duration: 1000,
					type: 'error'
				});
	  		})
		},
		async getData(){
			let params = {
				pageId: this.$route.query.pageId,//
			}
			let res = await this.$store.dispatch("findPage", params);
			let data = res.selComponents;
			this.qrcodeLink = res.mobilePathInfo;
			this.qrcodeLink && this.qrcode();
			// console.log('data', JSON.parse(res.selComponents))
			return data
		}
	},
	computed: {
		componentObj () {
			return this.$store.getters.componentObj
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "../../../static/css/style.less";
.list-group,
.list-group-item{
	position: relative;
	width: 100%;
	z-index: 2;
}
.previewPage{
	.edit-main{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-flex: 12;
		-ms-flex: 12;
		flex: 12;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 25px 90px 25px;
		.previewInfo{
			// width: 100%;
			padding-left: 75px;
			h3{
				font-size: 18px;
				font-weight: 700;
				line-height: 24px;
			}
			.tip{
				line-height: 1.5;
				padding-top: 18px;
			}
			.qrcode-box{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				margin-top: 16px;
				.qrcode-box-img{
					text-align: center;
					padding-right: 20px;
					.scan{
						color: #bfbfbf;
						font-size: 12px;
						line-height: 3;
					}
				}
				.qrcode-box-link{
					padding-left: 18px;
					height: 226px;
					position: relative;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					-ms-flex-direction: column;
					flex-direction: column;
					padding-top: 12px;
					border-left: 1px solid #f0f0f0;
				}
			}
		}
	}
}
</style>
